<!-- 
    黄俊文
    2019-12-12
    
    示例：
            html: <zc-input :isShowPicker="isShowPicker" :value="inputVal" @clickInput="clickInput" @value="getInputValue" ></zc-input>
            
            data:   isShowPicker:false, // 处理键盘及光标显示
                    inputVal:'' // 输入框显示的值
            
            js:     zcInputValue() {    //  处理页面点击非键盘和非输入框 隐藏键盘和失去焦点
                        _this.isShowPicker = false;
                    },
                    getInputValue(res) {    //  获取输入框值
                        _this.inputVal = res;
                    },
                    clickInput() {  //  点击输入框事件
                        _this.isShowPicker = true;
                    }
            
 -->


<template>
	<view @tap.stop>
		<view class="zc-input" v-if="inputVals.length>0||isShowPicker" @tap.stop="getInputFocus(inputVals)" >
		    <view v-for="(item,index) in inputVals" :key="index" :class="item=='zcFocus'?item+'':'li'" @tap.stop="getInputIndex(inputVals,index)" >{{item=='zcFocus'?'':item}}</view>
		</view>
		<view class="zc-input zc-input-placeholder" v-else @tap.stop="getInputFocus(inputVals)">请输入车牌号</view>
        
		<view class="picker_mask" :style="{'height':isShowPicker?'40%':'0','opacity':isShowPicker?'1':'0'}" @touchmove.stop="zcTouchmove">
			<view class="picker_content" :style="{'bottom':isShowPicker?'0':'-1000rpx'}">
				<view class="picker_box">
					<view class="picker_item1 uni-flex uni-flex-item">
						<block v-for="(item,index) in maskData.list1" :key="index">
							<view hover-stay-time="200" hover-class="picker_item1_hover" @tap.stop="clickChange(item)">{{item}}</view>
						</block>
					</view>
					<view class="picker_item1 uni-flex uni-flex-item">
						<block v-for="(item,index) in maskData.list2" :key="index">
							<view hover-stay-time="200" hover-class="picker_item1_hover" @tap.stop="clickChange(item)">{{item}}</view>
						</block>
					</view>
					<view class="picker_item2 uni-flex uni-flex-item">
						<block v-for="(item,index) in maskData.list3" :key="index">
							<view hover-stay-time="200" hover-class="picker_item2_hover" @tap.stop="clickChange(item)">{{item}}</view>
						</block>
					</view>
					<view class="picker_item2 uni-flex uni-flex-item">
						<block v-for="(item,index) in maskData.list4" :key="index">
							<view hover-stay-time="200" hover-class="picker_item2_hover" @tap.stop="clickChange(item)">{{item}}</view>
						</block>
					</view>
					<view class="picker_item2 uni-flex uni-flex-item">
						<block v-for="(item,index) in maskData.list5" :key="index">
							<view hover-stay-time="200" hover-class="picker_item2_hover" @tap.stop="clickChange(item)">{{item}}</view>
						</block>
						<view hover-stay-time="200" hover-class="picker_item2_hover" class="" @tap.stop="itemDel(inputVals)">
							<view class="iconfont icon-delete"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
        props:{
            isShowPicker:{
                typr:Boolean,
                default:false
            },
            inputVal:{
                typr:String,
                default:''
            }
        },
		data() {
			return {
				inputVals:[],
				addIndex:0, //光标位置
				maskData:{
					list1:['港','澳','学','警','领','使'],
					list2:['1','2','3','4','5','6','7','8','9','0'],
					list3:['Q','W','E','R','T','Y','U','I','O','P'],
					list4:['A','S','D','F','G','H','J','K','L'],
					list5:['Z','X','C','V','B','N','M']
				}
			};
		},
        watch:{
            isShowPicker(newData,old) {
                if (!newData) {
                    let listN = this.inputVals;
                    for (let i = 0; i < listN.length; i++) {
                        if (listN[i] === 'zcFocus') {
                            this.inputVals.splice(i,1); 
														this.inputVals = JSON.parse(JSON.stringify(this.inputVals))
                        }
                    }
										let _this=this
                }else{
									console.log("this.inputVals99999",this.inputVals);
								}
            },
            inputVal(newData, old) {
                if (this.isShowPicker) {
                   this.inputVals = JSON.parse(JSON.stringify(this.initFocus(newData.split(''),this.addIndex))); 
								}else{
									if(this.inputVals){
										this.inputVals = JSON.parse(JSON.stringify(this.initFocus(newData.split(''),this.addIndex)));
									}
								}
            }
        },
        created() {
            this.inputVals = this.inputVal.split('');
        },
        methods:{
            zcTouchmove() {
            	return
            },
            //  车牌输入 软键盘事件
            clickChange(res) {
            	this.addInputValue(this.inputVals,res);
				      console.log('this.inputVals',this.initString(this.inputVals));
              this.$emit('value',this.initString(this.inputVals));
            },
            itemDel(list) {
            	let listN = list;
            	for (let i = 0; i < listN.length; i++) {
            	    if (listN[i] === 'zcFocus') {
            	        if (i != 0) {
            	           list.splice(i-1,1); 
												 this.addIndex = i-1
            	        }
            	    }
            	}
                this.$emit('value',this.initString(this.inputVals));
            },
            // 输入框 事件
            getInputFocus(list) {
               this.inputVals = JSON.parse(JSON.stringify(this.initFocus(list,list.length)));
               this.$emit('clickInput',!this.isShowPicker)
            },
            getInputIndex(list,index) {
                // this.getInputFocus(list);
                this.inputVals = JSON.parse(JSON.stringify(this.initFocus(list,index)));
								 this.$emit('clickInput',!this.isShowPicker)
            },
            //  初始化 光标位置  list: 传入需要初始化的数据（数组）， index: 需要将光标初始化的下标位置
            initFocus(list,index) {
                let listN = list;
                for (let i = 0; i < listN.length; i++) {
                    if (listN[i] === 'zcFocus') {
                        list.splice(i,1);
                    }
                }
                list.splice(index,0,'zcFocus');
                return list;
            },
            // 在焦点前面添加值
            addInputValue(list,value) {
                const listN = JSON.parse(JSON.stringify(list));
                if (listN.length>1) {
                    for (let i = 0; i < listN.length; i++) {
                        if (listN[i] === 'zcFocus') {
                            list.splice(i,0,value);
														this.addIndex = i + 1;
                        }
                    }
                }else {
                    list.splice(0,0,value);
										 this.addIndex = 1
                }
            },
            // 最终数据处理成字符串 
            initString(list) {
                let str = '';
                if (list!=null&&list.length>0) {
                   for (let i = 0; i < list.length; i++) {
                       if (list[i] != 'zcFocus') {
                            if (i == 0) {
                                str = list[i];
                            }else {
                                str = str + list[i];
                            } 
                       }
                   } 
                }
                
                return str;
            }
            
        }
	}
</script>

<style>
    .zc-input{overflow: hidden;max-width: 210upx;  min-width: 200upx;display: flex;align-items: center;height: 40upx;padding: 7px 6upx 6upx 6upx;width: 100% !important;}
    .zc-input-placeholder{color: #999999;}
    .zcFocus{
        position: relative;
        height: 100%;
		/* width: 100% !important; */
    }
    .zcFocus:after{
        content: '';
        height: 100%;
        width: 0px;
        opacity: 0;
        position: absolute;
        /* left: 1upx; */
        border-right: 4upx solid #333333;
        animation:myfirst 1s infinite;
        -moz-animation:myfirst 1s infinite; /* Firefox */
        -webkit-animation:myfirst 1s infinite; /* Safari and Chrome */
        -o-animation:myfirst 1s infinite; /* Opera */
    }
    
    @keyframes myfirst
    {
        0%   {opacity:1;}
        100% {opacity:0;}
    }
    
    @-moz-keyframes myfirst /* Firefox */
    {
        0%   {opacity:1;}
        100% {opacity:0;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
       0%   {opacity:1;}
       100% {opacity:0;}
    }
    
    @-o-keyframes myfirst /* Opera */
    {
        0%   {opacity:1;}
        100% {opacity:0;}
    }
    
    
    /* 车牌号自定义选择键盘 */
    .picker_mask{width: 100%;position: fixed;bottom: 0;left: 0;display: flex;align-items: center;justify-content: center;z-index: 1000;opacity: 0;transition: opacity .5s;}
    .picker_content{height: 100%;width: 100%;background-color: #FFFFFF;bottom: -1000upx;;left: 0;position: absolute;transition: bottom .5s;}
    .picker_box{height: 100%;width: 100%;overflow: auto;box-sizing: border-box;background-color: #E5E5E5;display: flex;flex-direction: column;}
    .picker_item1>view{padding: 10upx 0;margin: 8upx;background-color: #CCCCCC;border-radius: 6upx;display: flex;align-items: center;justify-content: center;flex: 1;}
    .picker_item1_hover{background-color: #FFFFFF!important;}
    .picker_item2>view{padding: 10upx 0;margin: 6upx;background-color: #FFFFFF;border-radius: 6upx;display: flex;align-items: center;justify-content: center;flex: 1;box-sizing: border-box;}
    .picker_item2_hover{background-color: #CCCCCC!important;}
    @font-face {
      font-family: 'iconfont';  /* project id 1144889 */
      src: url('//at.alicdn.com/t/font_1144889_sfbz8a7zb4o.ttf') format('truetype');
    }
    .iconfont {
    	font-family: "iconfont" !important;
    	font-size: 28upx;
    	font-style: normal;
    	position: relative;
    	-webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
    }
    /* 车牌 软键盘 删除图标 */
    .icon-delete:before{
    	content: '\e623';
    	font-size: 40upx;
    }
</style>
